<template>
  <div class="distrib_list">
    <div class="top_treadcrumb">
        <span class="lander_detail_back" title="返回">
            <svg class="icon" aria-hidden="true" @click="back"><use xlink:href="#icon-fanhuihong1"></use></svg>
        </span>
        <span>{{assistantid}}：{{username}} {{title}}</span>
    </div>
    <div class="distrib_list_search">
      <div class="search_box">
        <el-select
          style="width: 145px;"
          v-model="featchData.settleStat"
          placeholder="请选择"
        >
          <el-option
            v-for="item in settlementDetilStatusOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-date-picker
          v-model="featchData.dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <el-button type="primary" style="height: 36px;" @click="searchData">搜索</el-button>
        <span @click="resetData()" class="reset_btn">重置</span>
      </div>
    </div>
    <div class="distrib_list_table">
      <page-table-new
        ref="multipleTable"
        :tableData="tableData"
        :total="total"
        :featchData="featchData"
        :defaultSort="{ prop: 'modifyTime', order: 'descending' }"
        :tableColumns="tableColumns"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
        @selectionChange="handleSelectionChange"
      >
        <!-- 结算周期 -->
        <template #attime="scope">
            <div>
                <span>{{ dateFormat(scope.row.startat,'yyyy-MM-dd') }} 至 {{ dateFormat(scope.row.endat,'yyyy-MM-dd') }}</span>
            </div>
        </template>
        <!-- 结算时间 -->
        <template #settleat="scope">
            <div>
                <span v-if="scope.row.settleat">{{ dateFormat(scope.row.settleat,'yyyy-MM-dd HH:mm:ss') }}</span>
                <span v-else> - </span>
            </div>
        </template>
        <!-- 结算状态 -->
        <template #settlestat="scope">
            <div v-if="scope.row.settlestat === 0">
                <span class="status_tag"></span><span>未结算</span>
            </div>
            <div v-if="scope.row.settlestat === 1">
                <span style="background: #56A500;" class="status_tag"></span><span>已结算</span>
            </div>
        </template>
        <!-- 调账后分成金额 -->
        <template #adjuestmoney="scope">
            <span v-if="scope.row.adjuestmoney">{{ scope.row.adjuestmoney }}</span>
            <span v-else> - </span>
        </template>
        <!-- 备注 -->
        <template #remark="scope">
            <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
            <span v-else> - </span>
        </template>
        <template #action="scope">
            <div>
                <el-button 
                  type="default" 
                  v-if="scope.row.settlestat === 0 && settlementstatus === 1"
                  @click="dialogSettlement(scope.row,false)"
                >
                  <span>确认结算</span>
                </el-button>
                <el-button 
                  type="default" 
                  class="blue_button"
                  v-if="scope.row.settlestat === 1 && scope.row.adjuestmoney !== null && scope.row.adjuestmoney !== ''"
                  @click="dialogDetile(scope.row)"
                >
                  <span>调账明细</span>
                </el-button>
            </div>
        </template>
        <template #table-footer="scope" v-if="settlementstatus === 1">
          <div class="table_bottom">
            <el-checkbox 
              :indeterminate="isIndeterminate" 
              v-model="allChecked"
              @change="toggleSelection"
              ></el-checkbox>
            <span>全选 已选{{tableDataCheckList.length}}项，分成金额共计</span><span style="color:#a80100">{{checkMoney}}</span><span>元</span>
            <el-button 
              :disabled="tableDataCheckList.length === 0"
              class="white_button"
              type="default" 
              @click="dialogSettlement(scope.row,true)"
            >
              <span>批量结算</span>
            </el-button>
          </div>
        </template>
      </page-table-new>
      <!-- 批量结算与结算 -->
      <dialog-settles
        ref="dialosettles"
        :isBatch="isBatch"
        :row="tablerow"
        :id="assistantid.toString()"
        :checkMoney="checkMoney"
        :tableDataCheckList="tableDataCheckList"
        @refreshPage="refreshPage"
      ></dialog-settles>
      <!-- 调账明细 -->
      <el-dialog
        title="调账明细"
        :visible.sync="dialogDetileVisible"
        width="670px"
      >
        <page-table-new
          :tableData="tableDataDetile"
          :tableColumns="tableColumnsDetile"
          :hasPage="false"
        >
          <!-- 结算时间 -->
          <template #settleat="scope">
              <div>
                  <span v-if="scope.row.settleat">{{ dateFormat(scope.row.settleat,'yyyy-MM-dd HH:mm:ss') }}</span>
                  <span v-else> - </span>
              </div>
          </template>
        </page-table-new>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogDetileVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pageTableNew from "@com/tableNew";
import dialogSettles from "./dialogSettles";
import { getDetailListByPage } from "@/api/distrib";
 
import {  
    DETAILLIST_TABLE_COLUMNS,
    SETTLEMENT_DETAIL_STATUS_OPTIONS,
    DETAILLISTROW_TABLE_COLUMNS
} from "../../const";
import { formatDate } from "@/utils/validate";
import { getCookie } from "@/utils/auth";
import { numAdd } from "@/utils";
export default {
  components: { pageTableNew,dialogSettles },
  data() {
    return {
      title:'',
      settlementstatus:'', // 1 分成结算 2 结算明细
      groupsOption: [],
      assistantid:'',
      username:'',
      allChecked:'',
      isBatch:false,
      tableDataCheckList:[],
      tablerow:{},
      isIndeterminate:false,
      dialogDetileVisible:false,
      checkMoney:0,
      roleType: getCookie("roleType"),
      childRoleName:'',
      featchData: {
        pageSize: 20,
        pageStart: 1,
        dateTime: [], //时间区间
        settleStat:'',
      },
      settlementDetilStatusOption: SETTLEMENT_DETAIL_STATUS_OPTIONS, // 结算状态
      tableData: [],
      tableColumns: DETAILLIST_TABLE_COLUMNS,
      tableDataDetile:[],
      tableColumnsDetile:DETAILLISTROW_TABLE_COLUMNS,
      total: 0,
    };
  },
  created() {
    this.title = this.$route.query.title;
    this.settlementstatus = this.$route.query.settlementstatus;
    this.childRoleName = this.$store.state.user.childRoleName;
    this.assistantid = this.$route.query.assistantid;
    this.username = this.$route.query.username;
    this.tableColumns[0].selectable = function(row){
      if(row.settlestat === 1){
        return false;
      }
      return true;
    }
    this.searchData();
  },
  watch:{
    tableDataCheckList:(val,old)=>{

    }
  },
  computed: {
    dateFormat(){
      return function(date,format){
        if(date){
          return formatDate(new Date(date),format)
        }
      }
    },
  },
  methods: {
    //返回
    back() {
      this.$router.back();
    },
    //重新搜索
    resetData() {
      this.featchData = {
        pageSize: 20,
        pageStart: 1,
        dateTime: [], //时间区间
        settleStat:'',
      };
      this.$nextTick(()=>{
        this.searchData();
      })
    },
    searchData() {
      let params = {
        page: this.featchData.pageStart,
        pageSize: this.featchData.pageSize,
        startAt: this.featchData.dateTime[0]?new Date(this.featchData.dateTime[0]).getTime():'',
        endAt: this.featchData.dateTime[1]?new Date(this.featchData.dateTime[1]).getTime():'',
        assistantId: this.assistantid,
        settleStat: this.featchData.settleStat,
      };
      getDetailListByPage(params).then(res => {
        if(res.code === 0){
          this.total = res.data.total;
          this.tableData = res.data.values;
        }else{
          this.$message.error(res.message);
        }
      });
    },
    handlePageChange(value) {
      this.featchData.pageSize = value.pageSize;
      this.featchData.pageStart = value.pageStart;
      this.searchData();
    },
    // 表格选中
    handleSelectionChange(value){
      this.tableDataCheckList = value;
      this.checkMoney = 0;
      value.forEach(element => {
        this.checkMoney = numAdd(this.checkMoney,element.money);
      });
      var checkTableList = this.tableData.filter(item=>{
        return item.settlestat !== 1;
      })
      this.allChecked = this.tableDataCheckList.length === checkTableList.length;
      this.isIndeterminate = this.tableDataCheckList.length > 0 && this.tableDataCheckList.length < checkTableList.length;
    },
    // 全选表格
    toggleSelection(){
      var checkTableList = this.tableData.filter(item=>{
        return item.settlestat !== 1;
      })
      checkTableList.forEach(row => {
        if(row.settlestat !== 1){
          this.$refs.multipleTable.toggleRowSelection(row);
        }
      });
    },
    refreshPage(){
      this.searchData();
    },
    // 批量结算/结算
    dialogSettlement(row,isBatch){
      this.isBatch = isBatch;
      if(!this.isBatch){
        this.tablerow = row;
      }
      this.$refs.dialosettles.open();
    },
    // 调账明细
    dialogDetile(row){
      this.tableDataDetile = [];
      this.tableDataDetile.push(row);
      this.dialogDetileVisible = true;
    },
    handleSortChange() {},
  }
};
</script>

<style lang="scss" scoped>
.distrib_list {
  .top_treadcrumb {
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #141414;
    letter-spacing: 0;
    line-height: 24px;
    font-weight: 600;
    .lander_detail_back{
        .icon{
            width: 24px;
            height: 24px;
            vertical-align: top;
            margin-right: 10px;
            cursor: pointer;
        }
    }
  }
  .tableDetile {
    thead tr th{
      background-color: #f2f3f7;
      font-size: 14px;
      font-weight: 600;
      color: #777;
    }
  }
  .distrib_list_search {
    margin-top: 21px;
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      margin-bottom: 16px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .total_data {
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 22px;
    height: 22px;
    box-sizing: border-box;
    .data_label {
      font-family: PingFangSC-Semibold;
      color: #404040;
      font-weight: 600;
    }
    .custom_text {
      font-family: PingFangSC-Regular;
      color: #404040;
    }
    .num_data {
      font-weight: 600;
    }
  }
  .distrib_list_table {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
    margin: 0 0 16px 0;
    .status_tag {
      display: inline-block;
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background: #cf0d17;
      margin-right: 6px;
      position: relative;
      top: -2px;
    }
    .red_button {
      margin-left: 4px;
    }
    .table_btn {
      display: inline-block;
      box-sizing: border-box;
      height: 22px;
      line-height: 20px;
      width: 40px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #06367c;
      color: #06367c;
      cursor: pointer;
    }
    .table_bottom{
      background: #f2f3f7;
      line-height: 40px;
      height: 40px;
      font-size: 14px;
      color: #333;
      .el-checkbox{
        width: 48px;
        padding-left: 10px;
        text-align: center;
      }

    }
  }
}
</style>
